import React, { Component } from 'react';
import '../App.css';


import {Layout, Menu,Icon,} from 'antd';
import axios from "axios";

// import { BrowserRouter as Router, Route } from "react-router-dom";

import Tab from '../components/Tab'

import storageUtils from '../utils/StorageUtils'
// import fetchJsonp from 'fetch-jsonp';

const { Sider} = Layout;
const SubMenu = Menu.SubMenu;

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            collapsed: false,
            menuList:[]
         };
    }
    
    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({
           collapsed
         });
      }
    
      getMenu=()=>{
        let url = "http://t.weather.sojson.com/api/weather/city/101010100";
        axios.get(url)
        .then(function (response) {
          // handle success
          // console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
      }
      //jsonp 不好使
      // getMenu2=()=>{
      //   let url2= 'http://10.2.100.149:8080/getMenu';
      //   fetchJsonp(url2)
      //   .then(function(response) {
      //     return response.json()
      //   }).then(function(json) {
      //     console.log('parsed json', json)
      //   }).catch(function(ex) {
      //     console.log('parsing failed', ex)
      //   })
      // }
    
      //后台设置 允许跨域
        getMenu3=()=>{
        let url = 'http://10.2.180.158:8080/getMenu';
    
        let list;
        axios.get(url)
        .then((response)=> {
          // handle success
          // console.log(response.data.data);
          list = response.data.data;
          this.setState({
            menuList:list
          })
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
      }
    
    
    
    
      componentDidMount(){
    
    
        // let user = storageUtils.get('user');
        // if(user!=='admin'){
        //     window.location.href='/Login';
        //     return false;
        // }
    
        // Make a request for a user with a given ID
        this.getMenu();
        this.getMenu3();
      }
    
      handleRouter=(key,menuName)=>{
          this.refs.tab.add(key,menuName);
      }
    
    
      render() {
        return (
         
          <div className="App">
            <header className="App-header">
              <p className='p1'>中格优至</p>
            </header>
    
          
            <div >
            
               {/* 左侧菜单栏目 */}
                <Layout style={{ minHeight: '93vh' }}>
                    <Sider
                      collapsible
                      collapsed={this.state.collapsed}
                      onCollapse={this.onCollapse}
                    >
                      <div className="logo" />
                      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
    
    
                        {this.state.menuList!=null ?
                          this.state.menuList.map((value,key)=>{
                          
                            if(value.children.length===0){
                              return(
                                  <Menu.Item key={value.id} onClick={this.handleRouter.bind(this,value.id,value.menuName)}>
                                      <Icon type="pie-chart"  />
                                      <span>
                                        {value.menuName}
                                      </span>
                                  </Menu.Item>
                              )
                            }else{
                              return(
                                  <SubMenu
                                    key={value.id}
                                    title={<span ><Icon type="user" /><span>{value.menuName}</span></span>}
                                  >
                                    {value.children.map((value1,key1)=>{
                                        return(
                                            <Menu.Item key={value1.id} onClick={this.handleRouter.bind(this,value1.id,value1.menuName)}>                                        
                                                {value1.menuName}                                       
                                            </Menu.Item>
                                        )
                                    })}
                                  </SubMenu>
                              )
                            }
                          })
                        : null} 
                      </Menu>
                    </Sider>
    
                    {/* 右侧内容区域 */}
                    <Layout>
                    
                      
                      <Tab 
                          ref="tab"
                      />
    
                    </Layout>               
                  </Layout>
    
            </div>
          </div>
        );
      }

}

export default Index;